{% extends 'base/base.html' %}
{% load poll_extras %}
{% load highlight %}
{% block title %}
    首页
{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/news/search.css' %}">

{% endblock %}
{% block main %}
    <!-- main start -->
    <main id="main">
        <div class="w1200 clearfix">
            <!-- main-contain start  -->
            <div class="main-contain ">
                <!-- search-box start -->
                <div class="search-box">
                    <form action="" style="display: inline-flex;">

                        <input type="search" placeholder="请输入要搜索的内容" name="q" class="search-control">


                        <input type="submit" value="搜索" class="search-btn">
                    </form>
                    <!-- 可以用浮动 垂直对齐 以及 flex  -->
                </div>
                <!-- search-box end -->
                <!-- content start -->
                <div class="content">
                    <!-- search-list start -->


                    <!-- search-list end -->
                    <!-- news-contain start -->

                    <div class="news-contain">
                        {% if  show_all %}
                            <div class="hot-recommend-list">
                                <h2 class="hot-recommend-title">热门推荐</h2>
                                <ul class="news-list">
                                    {% for art in page.object_list %}
                                        <li class="news-item clearfix">
                                            <a href="{% url 'news:article_detail' art.article_id %}"
                                               class="news-thumbnail">
                                                <img src="{{ art.article.thumbnail }}">
                                            </a>
                                            <div class="news-content">
                                                <h4 class="news-title">
                                                    <a href="{% url 'news:article_detail' art.article_id %}">{{ art.article.title }}</a>
                                                </h4>
                                                <p class="news-details">{{ art.article.digest }}
                                                </p>
                                                <div class="news-other">
                                                    <span class="news-type">{{ art.article.tag.name }}</span>
                                                    <span class="news-time">{{ art.article.update_time|customTimeFmt }}</span>
                                                    <span class="news-author">{{ art.article.author.username }}</span>
                                                </div>
                                            </div>
                                        </li>
                                    {% endfor %}
                                    {#                                    <li class="news-item clearfix">#}
                                    {#                                        <a href="#" class="news-thumbnail">#}
                                    {#                                            <img src="{% static 'images/python_gui.jpg' %}">#}
                                    {#                                        </a>#}
                                    {#                                        <div class="news-content">#}
                                    {#                                            <h4 class="news-title">#}
                                    {#                                                <a href="#">python高性能编程方法一</a>#}
                                    {#                                            </h4>#}
                                    {#                                            <p class="news-details">#}
                                    {#                                            </p>#}
                                    {#                                            <div class="news-other">#}
                                    {#                                                <span class="news-type">Python高级</span>#}
                                    {#                                                <span class="news-time">11/11 17:13</span>#}
                                    {#                                                <span class="news-author">python</span>#}
                                    {#                                            </div>#}
                                    {#                                        </div>#}
                                    {#                                    </li>#}


                                </ul>
                            </div>
                        {% else %}
                            <div class="hot-recommend-list">
                                <h2 class="hot-recommend-title">搜索结果
                                    <span style="font-weight: 700;color: cornflowerblue;">{{ paginator.num_pages }}</span>页
                                </h2>
                                <ul class="news-list">
                                    {% for art in page.object_list %}
                                        <li class="news-item clearfix">
                                            <a href="{% url 'news:article_detail' art.object.id %} }"
                                               class="news-thumbnail">
                                                <img src="{{ art.object.thumbnail }}">
                                            </a>
                                            <div class="news-content">
                                                <h4 class="news-title">
                                                    <a href="{% url 'news:article_detail' art.object.id %} }">{% highlight art.object.title with query %}</a>
                                                </h4>
                                                <p class="news-details">{% highlight art.object.digest with query %}
                                                </p>
                                                <div class="news-other">
                                                    <span class="news-type">{{ art.object.tag.name }}</span>
                                                    <span class="news-time">{{ art.object.update_time|customTimeFmt }}</span>
                                                    <span class="news-author">{% highlight art.object.author.username with query %}</span>
                                                </div>
                                            </div>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                        <div class="page-box" id="pages">
                            <div class="pagebar" id="pageBar">
                                <a href="" class="a1">上一页</a>
                                <a href="" class="active">1</a>
                                <a href="">2</a>
                                <a href="">3</a>
                                <a href="">4</a>
                                <a href="">5</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">1</a>
                                <a href="">下一页</a>
                            </div>
                        </div>

                    </div>


                    <!-- news-contain end -->
                </div>
                <!-- content end -->
            </div>
            <!-- main-contain  end -->
            <!-- side start -->
            {% include 'base/side.html' %}
            <!-- side end -->


        </div>
    </main>
    <!-- main end -->
{% endblock %}
{% block script %}

{% endblock %}